<template>
	<view class="container">
		<my-tab :list="list1" bgColor="#fff" :current="currentIndex" @itemClick='itemClick'></my-tab>
		<view class="with-container" v-if="mobile!='' && currentIndex==1">
			<view class="with_top">
				<view class="with_top_text1">
					<text>请输入提现金额</text>
				</view>
				<view class="with_top_input">
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/icon-money.png" mode="widthFix"></image>
					<input type="number" placeholder="请输入提现金额" v-model="form.money" @input="checkNum($event)"/>
				</view>
				<view class="with_top_flex">
					<text class="with_top_text2">可提现金额：￥{{user_money}}</text>
					<text class="with_top_text3" @tap="allWith">全部提现</text>
				</view>
			</view>
			<view class="with_code" v-if="user_with_sms_enable!=0">
				<text class="body_pos_tit">验证码</text>
				<u-input border="none" class="body_phone_input" placeholder="请输入验证码" placeholderClass="input-placeholder"
					type="number" maxlength="6" fontSize="26rpx" clearable v-model="form.code"></u-input>
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<u-code ref="uCode1" :seconds="sms_time_out" @change="codeChange" keep-running
							change-text="Xs" @start="disabled = true" @end="disabled = false"></u-code>
						<button size="mini" @tap="getCode" :disabled="disabled" class="code-btn">{{tips}}</button>
					</view>
				</view>
			</view>
			<view class="with-row">
				<view class="goods-row-tit">
					<text>请选择提现方式</text>
					<button size="mini" class="set-btn" @click="navigateTo('/pages/center/with-account')">设置提现账户</button>
				</view>
				<view class="pay-items">
					<view @tap="changePay(1)" class="pay-item" v-if="is_wx_bind==1">
						<image mode="widthFix" src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/order/zf-weixin.png" class="pay-item-left-img"/>
						<text>提现到微信</text>
						<image mode="widthFix" :src="form.tx_type==1?'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/checkbox-sel.png':'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/checkbox.png'" class="pay-item-img"/>
					</view>
					<view @tap="changePay(2)" class="pay-item" v-if="is_zfb_bind==1">
						<image mode="widthFix" src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/order/zf-zfb.png" class="pay-item-left-img"/>
						<text>提现到支付宝</text>
						<image mode="widthFix" :src="form.tx_type==2?'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/checkbox-sel.png':'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/checkbox.png'" class="pay-item-img"/>
					</view>
				</view>
			</view>
			<button type="default" class="submit-btn" :disabled="btnDisabled" @click="tijiao">{{con_text}}</button>
		</view>
		<view class="zr-container" v-if="mobile!='' && currentIndex==0">
			<view class="submit-form-group">
				<view class="form-row">
					<view class="left">转让类型</view>
					<view class="right">
						<view class="right-row" @click.stop="changeZrType(1)">
							<image mode="widthFix" :src="zr_form.type==1?'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/checkbox-sel.png':'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/checkbox.png'"/>
							<text>粮票</text>
						</view>
						<view class="right-row" @click.stop="changeZrType(3)">
							<image mode="widthFix" :src="zr_form.type==3?'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/checkbox-sel.png':'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/checkbox.png'"/>
							<text>牧场补贴</text>
						</view>
					</view>
				</view>
				<view class="form-row">
					<view class="left">拥有数量</view>
					<view class="right">{{zr_form.type==1?user_money:mcbt}}</view>
				</view>
				<view class="form-row">
					<view class="left">转让数量</view>
					<input type="text" placeholder="请输入转让数量" placeholder-class="input-placeholder" class="form-row-input" v-model="zr_form.money" />
				</view>
				<view class="form-row">
					<view class="left">对方账号</view>
					<input type="text" placeholder="请输入对方账号" placeholder-class="input-placeholder" class="form-row-input" v-model="zr_form.dfmobile" />
				</view>
				<view class="form-row">
					<view class="left">对方ID</view>
					<input type="text" placeholder="请输入对方ID" placeholder-class="input-placeholder" class="form-row-input" v-model="zr_form.uid" />
				</view>
				<view class="form-row">
					<view class="left">交易密码</view>
					<input type="password" placeholder="请输入交易密码" placeholder-class="input-placeholder" class="form-row-input" v-model="zr_form.paypwd" />
				</view>
			</view>
			<button type="default" class="submit-btn" :disabled="zrBtnDisabled" @click="zr_tijiao">{{zr_text}}</button>
			<view class="hint">
				<view class="hint-tit">
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/hint.png" mode="widthFix"></image>
					<text>温馨提示</text>
				</view>
				<view class="hint-con" v-if="zr_form.type==1">
					粮票单次最小转让数量为{{given_config.lp_given_min}}，每日最大为{{given_config.lp_given_daymax}}；粮票转让数量必须为{{given_config.lp_given_xishu}}的整数倍；粮票转让需扣除{{given_config.lp_given_sxf}}%服务费
				</view>
				<view class="hint-con" v-else>
					牧场补贴单次最小转让数量为{{given_config.given_min}}，每日最大为{{given_config.given_daymax}}；牧场补贴转让数量必须为{{given_config.given_xishu}}的整数倍；牧场补贴转让需扣除{{given_config.given_sxf}}%服务费
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var validate = require("@/components/validate/validate.js");
	var _this
	export default {
		data() {
			return {
				list1: [{
					name: '转让',
				},{
					name: '提现',
				}],
				currentIndex: 0,
				user:'',
				sms_time_out:60,
				tips: '',
				disabled:false,
				code:'',
				mobile:'',
				number: '',
				show: false,
				user_money:0,
				mcbt:0,
				user_with_sms_enable:0,
				cash_open:0,
				given_open:0,
				lp_given_open:0,
				btnDisabled:false,
				con_text:'确认',
				is_wx_bind:0,
				is_zfb_bind:0,
				form:{
					money:'',
					code:'',
					tx_type:1,
					step:1
				},
				is_load_zr:false,
				user_given_sms_enable:0,
				user_given_sms_time_out:60,
				zr_form:{
					step:1,
					type:1,
					money:'',
					dfmobile:'',
					uid:'',
					paypwd:''
				},
				zr_ing:false,
				given_config:{}
			}
		},
		onNavigationBarButtonTap(item) {
			if(this.currentIndex==1){
				uni.$u.route({
					url:'pages/center/withdrawal-list',
				})
			}else{
				uni.navigateTo({
					url:'/pages/center/given-list'
				})
			}
		},
		onLoad() {
			_this=this
			// this.given()
		},
		onShow(){
			if(this.currentIndex==1){
				this.form.step=1
				this.cash()
			}else{
				this.zr_form.step=1
				this.given()
			}
			this.get_user_info()
		},
		computed:{
			zrBtnDisabled:{
				cache:false,
				get(){
					if(_this.zr_ing){
						return true;
					}
					if(_this.zr_form.type==1){
						if(_this.lp_given_open==0){
							return true
						}
					}else{
						if(_this.given_open==0){
							return true
						}
					}
					return false
				}
			},
			zr_text:{
				cache:false,
				get(){
					if(_this.zrBtnDisabled && !_this.zr_ing){
						if(_this.zr_form.type==1){
							return '粮票转让暂未开放'
						}else{
							return '牧场补贴转让暂未开放'
						}
					}
					return '转让'
				}
			}
		},
		methods: {
			//获取用户信息
			async get_user_info(){
				const data = await _this.$post('api/UserInfo')
				if(data.code==200){
					this.user=data.data.user
				}else{
					this.$u.toast(data.msg)
				}
			},
			jump(){
				uni.$u.route({
					url:'pages/center/withdrawal-list',
				})
			},
			itemClick(index){
				if(index==1){
					uni.setNavigationBarTitle({
						title:'申请提现'
					})
					// #ifdef APP-PLUS
					var webView = this.$mp.page.$getAppWebview();
					webView.setTitleNViewButtonStyle(0,{  
						text: "提现记录",
					});
					// #endif
				}else{
					uni.setNavigationBarTitle({
						title:'转让'
					})
					// #ifdef APP-PLUS
					var webView = this.$mp.page.$getAppWebview();
					webView.setTitleNViewButtonStyle(0,{  
						text: "转让记录",
					});
					// #endif
				}
				_this.currentIndex=index
				if(index==1){
					_this.form.step=1
					_this.cash()
				}
			},
			//切换支付方式
			changePay(type){
				if(this.form.tx_type==type){
					return;
				}
				this.form.tx_type=type
			},
			//切换转让方式
			changeZrType(type){
				if(this.zr_form.type==type){
					return;
				}
				this.zr_form.type=type
			},
			//获取验证码
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (this.$refs.uCode1.canGetCode) {
					const params = {
						mobile: this.mobile,
						scene: 5
					}
					const data = await _this.$post('api/GetCode',params)
					if (data.code == 200) {
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast(data.msg);
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode1.start();
					} else {
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast(data.msg);
					}
				} else {
					uni.$u.toast('请倒计时结束后再发送');
				}
			},
			//全部提现
			allWith(){
				this.form.money=this.user_money
			},
			// 输入金额方法
			checkNum(e) {
			    let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
				if(val<=0){
					this.$nextTick(() => {
					    this.form.money = '';
					})
					return
				}
			    if (!val) {
			        this.$nextTick(() => {
			            this.form.money = '';
			        })
			        return
			    }
				if(val>this.user_money){
					this.$nextTick(() => {
					    this.form.money = this.user_money;
					})
					return
				}
			    var reg = /[^\d.]/g
			    // 只能是数字和小数点，不能是其他输入
			    val = val.replace(reg, "")
			    // // 保证第一位只能是数字，不能是点
			    val = val.replace(/^\./g, "");
			    // // 小数只能出现1位
			    val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
			    // // 小数点后面保留2位
			    val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
				val = (val.match(/^\d*(\.?\d{0,2})/g)[0]) || ''
			    // console.log(val);
			    this.$nextTick(() => {
			        this.form.money = val;
			    })
			},
			//提交
			tijiao(){
				this.form.step=2
				this.cash()
			},
			//提现
			async cash(){
				if(this.form.step==2){
					let codeRule = {
						// 字段名
						name: 'code',
						rules: ['require', 'integer', 'min:6'],
						errorMsg: {
							require: '验证码不能为空',
							integer: '验证码只能为数字',
							min: '验证码为6位'
						}
					}
					var rule = [{
						// 字段名
						name: 'money',
						rules: ['require', 'number'],
						errorMsg: {
							require: '提现金额不能为空',
							number: '提现金额只能为数字',
						}
					}];
					if(this.user_with_sms_enable==1){
						rule.push(codeRule);
					}
					// 是否全部通过，返回Boolean
					let checked = validate.check(this.form, rule);
					if (!checked) {
						// 获取错误信息
						let err = validate.getError();
						uni.$u.toast(err[0])
						return;
					}
					this.btnDisabled=true
					setTimeout(res=>{
						this.btnDisabled=false
					},2000)
				}
				const data = await _this.$post('api/Withdrawals',this.form)
				if(data.code==200){
					this.$u.toast(data.msg)
					setTimeout(res=>{
						uni.$u.route({
							url:'pages/center/withdrawal-list',
						})
					},2000)
				}else if(data.code==10){
					this.user_money=data.data.user_money
					this.mobile=data.data.mobile
					this.sms_time_out=data.data.sms_time_out
					this.user_with_sms_enable=data.data.user_with_sms_enable
					this.cash_open=data.data.cash_open
					if(this.cash_open==0){
						this.con_text="提现暂未开放"
						this.btnDisabled=true
					}else{
						this.con_text="确认"
						this.btnDisabled=false
					}
					this.is_wx_bind=data.data.is_wx_bind
					this.is_zfb_bind=data.data.is_zfb_bind
					this.form.tx_type=data.data.temp_tx_type
				}else if(data.code==50){
					this.$u.toast(data.msg)
					setTimeout(res=>{
						uni.$u.route({
							url:'/pages/center/with-account',
							type:'redirectTo'
						})
					},2000)
				}else{
					this.$u.toast(data.msg)
				}
			},
			zr_tijiao(){
				this.zr_form.step = 2
				this.given()
			},
			async given() {
				if (this.zr_form.step == 2) {
					var rule = [{
						// 字段名
						name: 'money',
						rules: ['require', 'number'],
						errorMsg: {
							require: '请输入转让数量',
							number: '转让数量只能为数字'
						}
					},{
						// 字段名
						name: 'dfmobile',
						rules: ['require', 'mobile'],
						errorMsg: {
							require: '请输入对方账号',
							mobile: '对方账号格式有误'
						}
					},{
						// 字段名
						name: 'uid',
						rules: ['require', 'number'],
						errorMsg: {
							require: '请输入对方ID',
							number: '对方ID只能为数字'
						}
					},{
						// 字段名
						name: 'paypwd',
						rules: ['require', 'min:6'],
						errorMsg: {
							require: '请输入交易密码',
							min: '交易密码最少6位'
						}
					}];
					// 是否全部通过，返回Boolean
					let checked = validate.check(this.zr_form, rule);
					if (!checked) {
						// 获取错误信息
						let err = validate.getError();
						uni.$u.toast(err[0])
						return;
					}
					_this.zr_ing=true
					setTimeout(res=>{
						_this.zr_ing=false
					},2000)
				}
				const data = await _this.$post('api/user_given',this.zr_form)
				if (data.code == 200) {
					this.$u.toast(data.msg)
					this.zr_form.step = 1
					this.given()
					setTimeout(res=>{
						uni.navigateTo({
							url:'/pages/center/given-list'
						})
					},2000)
				} else if (data.code == 10) {
					this.is_load_zr=true
					this.mobile = data.data.mobile
					this.user_money = data.data.user_money
					this.mcbt = data.data.mcbt
					this.user_given_sms_enable = data.data.user_given_sms_enable
					this.user_given_sms_time_out = data.data.sms_time_out
					this.given_config = data.data.given_config
					this.given_open = data.data.given_config.given_open
					this.lp_given_open = data.data.given_config.lp_given_open
					// if(this.lp_given_open==0){
					// 	this.zr_text='粮票转让暂未开放'
					// 	this.zrBtnDisabled=true
					// }else{
					// 	this.zr_text='转让'
					// 	this.zrBtnDisabled=false
					// }
				} else if (data.code == 50) {
					this.$u.toast(data.msg)
					setTimeout(res=>{
						uni.redirectTo({
							url:'/pages/center/paypwd'
						})
					},2000)
				}else {
					this.$u.toast(data.msg)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/form.scss";
	.container{
		padding: 0;
	}
	.with-container{
		padding: 20rpx 30rpx 0 30rpx;
		.with_top {
			padding: 10rpx 30rpx 0 30rpx;
			border-radius: 10px;
			background: #FFFFFF;
			.with_top_text1 {
				line-height: 90rpx;
				font-size: 30rpx;
				font-weight: 500;
			}
			.with_top_input {
				position: relative;
				height: 60rpx;
				padding: 30rpx 0 20rpx 0;
				border-bottom: $global-border;
				image {
					width: 40rpx;
					height: 56rpx;
					position: absolute;
				}
				input {
					margin-left: 60rpx;
					height: 60rpx;
					margin-top: 10rpx;
					font-size: 30rpx;
				}
			}
			.with_top_flex {
				@include flex-box(row,space-between,center)
				padding: 20rpx 0;
				.with_top_text2{
					color: $color-919191;
				}
				.with_top_text3{
					color: $theme-color;
				}
			}
		}
	}
	.zr-container{
		padding: 20rpx 30rpx 0 30rpx;
		.submit-form-group{
			.form-row{
				padding: 0 30rpx;
				.right{
					@include flex-box(row,null,center)
					.right-row{
						@include flex-box(row,null,center)
						&:first-child{
							margin-right: 10rpx;
						}
						image{
							width: 34rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}
	}
	.with_code{
		height: 90rpx;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding:0 30rpx;
		.body_pos_tit{
			width: 15%;
		}
		.body_phone_input {
			flex: 1;
		}
		.u-demo-block {
			margin-left: 10rpx;
			@include flex-box(null,null,center);
			.code-btn{
				min-width: 140rpx;
				height: 44rpx;
				font-size: 24rpx;
				color: $theme-color;
				background: $bg-F7F7F7;
				border-radius: 30rpx;
				line-height: 44rpx;
				font-weight: 500;
				padding: 0;
				&[disabled]{
					color: #fff;
				}
			}
		}
	}
	.with-row{
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 10rpx 30rpx 0 30rpx;
		background: #fff;
		.goods-row-tit{
			font-size: 30rpx;
			font-weight: 500;
			line-height: 90rpx;
			border-bottom:$global-border;
			@include flex-box(row,space-between,center)
			.set-btn{
				background: none;
				color: $color-919191;
				font-size: 26rpx;
				padding: 0;
				font-weight: 400;
			}
		}
		.pay-items{
			.pay-item {
				min-height: 96rpx;
				@include flex-box(row,null,center);
				font-size: 24rpx;
				&:not(:last-child){
					border-bottom:$global-border;
				}
				.pay-item-left-img{
					width: 50rpx;
					margin-right: 15rpx;
				}
				.pay-item-img{
					width: 40rpx;
				}
				text {
					font-size: 28rpx;
					flex: 1;
				}
			}
		}
	}

	/deep/.input-placeholder{
		font-size: 26rpx;
		color: $color-ADADAD!important;
	}
</style>
